<template>
  <div id="main" class="container">
    <m-header>首页</m-header>
    <div class="main-banner">
      <div id="banners" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="item active">
            <a>
              <img width="600px" height="250px" alt="1" src="../../assets/images/banner-m.jpg">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="in-store-links-bar">
      <ul>
        <li>
          <a class="about-in-store" @click="knowledgePop = true">
            <div class="icons icon1">
              <div class="icon"></div>
            </div>
            <span style="margin-top: 10px;display: inline-block;">了解返现</span>
          </a>
        </li>
        <li>
          <a href="/users/in-store-card">
            <div class="icons icon2">
              <div class="icon"></div>
            </div>
            <span style="margin-top: 10px;display: inline-block;">银行卡</span>
          </a>
        </li>
        <li>
          <a href="/users/in-stores">
            <div class="icons icon3">
              <div class="icon"></div>
            </div>
            <span style="margin-top: 10px;display: inline-block;">返现商家</span>
          </a>
        </li>
        <li>
          <a href="/users/in-store-profile">
            <div class="icons icon4">
              <div class="icon"></div>
            </div>
            <span style="margin-top: 10px;display: inline-block;">线下返现明细</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="introduction" id="introduction">
      <ul class="nav">
        <li class="col-xs-6" :class="slected===0 ? 'active': ''">
          <a href="javascript: void 0" data-toggle="tab" @click="slected = 0">如何获得线下返现</a>
        </li>
        <li class="col-xs-6" :class="slected===1 ? 'active': ''">
          <a href="javascript: void 0" data-toggle="tab" @click="slected = 1">常见问题</a>
        </li>
      </ul>
      <div class="content tab-content" style="padding-bottom: 10px;">
        <div class="tab-pane how-in-store" :class="slected===0 ? 'active': ''" id="how-in-store" v-show="slected===0">
          <ul class="steps">
            <li>
              <div class="step-icon step-1"></div>
              <div class="step-detail"  style="position: relative; text-align: left;">
                <h4 style="font-size: 14px;line-height: 1.5;"><span style="font-size: 22px;">Step1: </span>使用邮箱,手机号快速登录</h4>
              </div>
            </li>
            <li>
              <div class="step-icon step-2"></div>
              <div class="step-detail"  style="position: relative; text-align: left;">
                <h4 style="font-size: 14px; line-height: 1.5;"><span style="font-size: 22px;">Step2: </span>绑定任意一张Visa卡</h4>
              </div>
            </li>
            <li>
              <div class="step-icon step-3"></div>
              <div class="step-detail"  style="position: relative; text-align: left;">
                <h4 style="font-size: 14px;line-height: 1.5;"><span style="font-size: 22px;">Step3: </span>使用已绑定的信用卡到美国商家线下刷卡消费，2个工作日确认返现</h4>
              </div>
            </li>
          </ul>
        </div>
        <div class="tab-pane q-a" id="q-a" :class="slected===1 ? 'active': ''">
          <dl v-for="faq in faqs" :class="faq.show ? 'active' : ''">
            <dt @click="toggle(faq)">{{faq.q}}<i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></dt>
            <dd>{{faq.a}}</dd>
          </dl>
        </div>
      </div>
    </div>

    <div class="a-store-detail hide">
      <span class="close">×</span>
      <img src="" alt="">
      <p class="name"></p>
      <p class="cashback"><em></em></p>
      <p class="expiration">过期时间：08/31/2017 11:59:59 PM PDT</p>


      <ul class="detail-tab-nav">
        <li class="active"><a href="#detail-left-content" class="first" data-toggle="tab">活动</a></li>
        <li><a href="#detail-right-content" data-toggle="tab">详情</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane detail-left-content active" id="detail-left-content">
          <div class="extra-cashback">
            <span></span>
            <div class="extra cashback-1">
              所有民生Visa品牌信用卡 十一期间线下消费返现翻倍！
            </div>
            <div class="extra cashback-2">
              使用民生海淘联名卡消费线下返现额外加2%
            </div>
          </div>
          <a href="/users/bind-card" class="bind-card" style="background-color: #f8c701;">立即绑卡，激活线下返现</a>
          <div class="store-detail-links">
            <p><a href="" target="_blank"><span class="fa fa-map-marker"></span>商家境外店铺地址<span class="fa fa-angle-right"></span></a></p>
            <p><a href="" target="_blank"><span class="fa fa-shopping-cart"></span>商家线上购物返利<span class="fa fa-angle-right"></span></a></p>
          </div>
        </div>
        <div class="tab-pane detail-right-content" id="detail-right-content">
          <p>详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情</p>
        </div>
      </div>

    </div>

    <div class="am-dimmer am-active" :class="knowledgePop ? '': 'hide'" data-am-dimmer="" style="display: block;"></div>
    <div class="in-store-guide-pop" :class="knowledgePop ? '': 'hide'">
      <div id="in-store-pop-banners" class="carousel slide" data-ride="carousel">
        <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
          <!-- slides -->
          <swiper-slide>
            <img alt="" style="width: 560px; height: 431px;" src="../../assets/images/非同返享.png">
          </swiper-slide>
          <swiper-slide>
            <img alt="" style="width: 560px; height: 431px;" src="../../assets/images/选择多多.png">
          </swiper-slide>
          <swiper-slide>
            <img alt="" style="width: 560px; height: 431px;" src="../../assets/images/简单易用.png">
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
      <div
        class="close-pop"
        @click="knowledgePop = false"
        style="position: absolute; top: 10px; right: 10px; margin: 0;z-index: 10;"
      >
        <img style="width: 20px;" src="../../assets/images/关闭X icon.png" alt="">
      </div>
    </div>

    <div class="go-to-bind">
      <p>在美国线下商店消费，即可获得收益返现！</p>
      <a href="/users/bind-card" style="background-color: #f8c701;">立即绑卡，激活线下返现</a>
    </div>

  </div>
</template>

<script type="text/babel">
  import faqs from './faqs'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import mHeader from '../common/Header/h5'

  export default {
    components: {
      swiper,
      swiperSlide,
      mHeader
    },
    data () {
      return {
        slected: 0,
        knowledgePop: false,
        notNextTick: true,
        swiperOption: {
          // swiper options 所有的配置同swiper官方api配置
          autoplay: 3000,
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          onTransitionStart (swiper) {
            console.log(swiper)
          }
        },
        faqs: faqs
      }
    },
    methods: {
      toggle(faq) {
        this.faqs.forEach(item => {
          if (item === faq) {
            faq.show = !faq.show
          } else {
            item.show = false
          }
        })
      }
    },
    mounted () {
    },
    destroyed () {
    }
  }
</script>

<style scoped lang="less">
  #main {
    padding:0;
    padding-bottom: 112px;
    min-width: 320px;
  }

  /*************************************************/
  .icons {
    width: 40px;
    height: 30px;
    margin: 0 auto;
    transform: scale(0.8);
  }
  .icons > .icon {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: -40px;
    -webkit-filter: drop-shadow(20px 0);
    filter: drop-shadow(40px 0);
    background-repeat:  no-repeat;
    background-position: center;
  }
  .icon1.icons > .icon {
    background-image: url(../../assets/images/了解返现.png);
    transform: scale(0.9);
  }
  .icon2.icons > .icon {
    background-image: url(../../assets/images/银行卡.png);
  }
  .icon3.icons > .icon {
    background-image: url(../../assets/images/返现商家.png);
  }
  .icon4.icons > .icon {
    background-image: url(../../assets/images/交易历史.png);
  }

  dt:active ~ dd {
    display: block;
    visibility: visible;
  }
</style>
